<!-- 头部 -->
<script setup>
import { storeToRefs } from "pinia";

// 获取用户信息
const global = useStore.global()
const user = useStore.user()
const { categoryList } = storeToRefs(global)
const { name, token } = storeToRefs(user)
// 获取通用数据
global.getCategoryApi()
global.getCityApi()
// 菜单
const menuKey = ref(1)
const activeIndex = ref('1')
const to = (path) => {
    menuKey.value++
    navigateTo(path)
}


// 登录
const loginFn = () => {
    user.login()
}

// 注册
const registerFn = () => {
    user.showRegister = true
}

const editPassRef = ref()
const handleCommand = (command) => {
    switch (command) {
        case 'loginOut':
            // 退出登录 返回首页
            user.logout()
            break;
        case 'editPass':
            editPassRef.value.show()
            break;
        case 'user':
            to('/user/personal')
            break;
        case 'userNeed':
            to('/user/need')
            break;
    }
}
</script>

<template>
    <el-header height="72px">
        <div class="fullW flex-btw h-full header">
            <div class="left flex items-center flex-1">
                <div class="logo flex items-center" @click="to('/')">
                    <img class="img mr-11px" src="@/assets/images/logo.png" />
                    <span>中俄跨境</span>
                </div>
                <client-only>
                    <el-menu :default-active="activeIndex" class="menu" mode="horizontal" background-color="transparent"
                        text-color="#000" active-text-color="#000" router :key="menuKey">
                        <el-sub-menu index="1">
                            <template #title>找资源 </template>
                            <el-menu-item v-for="(item,index) in categoryList" :key="index" :index="`/resource?type=${item.categoryCode}`">{{item.categoryName}}</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="/demand">需求列表</el-menu-item>
                    </el-menu>
                </client-only>
            </div>
            <div class="right">
                <div v-if="!token">
                    <el-button size="default" :text="true" @click="registerFn">注册</el-button>
                    <el-button size="default" class="darkBtn" color="#000" @click="loginFn">登录</el-button>
                </div>
                <div v-else class="avatar">
                    <client-only>
                        <el-dropdown @command="handleCommand">
                            <span class="dropdown">
                                <span style="margin-left: 10px;">{{ user.userInfo.userName }}</span>
                                <i class="iconfont icon-down"></i>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu class="dropdown-menu">
                                    <el-dropdown-item command="user"><i
                                            class="iconfont icon-personal"></i>个人中心</el-dropdown-item>
                                    <el-dropdown-item command="userNeed"><i
                                            class="iconfont icon-a-demandschedule"></i>需求提请表</el-dropdown-item>
                                    <el-dropdown-item command="editPass"><i
                                            class="iconfont icon-password"></i>修改密码</el-dropdown-item>
                                    <el-dropdown-item command="loginOut" class="bigItem">
                                        <el-button round>退出</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </client-only>
                </div>
            </div>
        </div>
    </el-header>

    <!-- 登录 -->
    <LoginDialog />
    <!-- 修改密码 -->
    <editPass ref="editPassRef" />
    <!-- 注册 -->
    <register />
</template>

<style scoped lang='scss'>
.el-header {
    background-color: var(--use-color-light-2);
}

.header {
    .logo {
        margin-right: 46px;
        cursor: pointer;

        span {
            font-size: 20px;
            font-family: Alimama ShuHeiTi;
        }
    }

    .menu {
        min-width: 400px;
    }
}


.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    // background-color: transparent !important;
}
.dropdown{
    cursor: pointer;
}
.dropdown-menu {
    width: 332px;
    padding: 12px 24px 24px;
    border-radius: 12px !important;

    .iconfont {
        margin-right: 12px;
        font-size: 20px;
    }

    ::v-deep(.el-dropdown-menu__item) {
        margin: 8px 0;
        padding: 0;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: var(--use-color-info);

        &:not(.is-disabled):focus,
        &:not(.is-disabled):hover {
            background-color: transparent;
        }

        &.bigItem {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid var(--use-color-line);
            height: 80px;

            .el-button {
                width: 100%;
                height: 48px;
                border-color: var(--use-color-info);
                color: var(--use-color-info);
                font-size: 16px;
            }
        }
    }
}

.darkBtn:hover{
    color: #fff;
}
</style>
